<template>
  <el-card class="section-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>内置图标库</span>
        <el-input v-model="search" placeholder="搜索图标名称" size="small" clearable class="search-input" />
      </div>
    </template>

    <el-alert
      title="图标静态资源由后端 /assets/icons 提供，如需新增请将图片放入工作区“小图标”目录。"
      type="info"
      show-icon
      class="mb-3"
    />

    <el-row :gutter="12" v-loading="loading">
      <el-col
        v-for="icon in filteredIcons"
        :key="icon.name"
        :xs="12"
        :sm="8"
        :md="4"
        :lg="3"
      >
        <div class="icon-card">
          <img :src="icon.url" :alt="icon.name" />
          <span>{{ icon.name }}</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { iconsApi } from '@/services/api';

const icons = ref([]);
const loading = ref(false);
const search = ref('');

const filteredIcons = computed(() => {
  if (!search.value) return icons.value;
  return icons.value.filter((icon) => icon.name.toLowerCase().includes(search.value.toLowerCase()));
});

async function fetchIcons() {
  loading.value = true;
  try {
    const response = await iconsApi.list();
    icons.value = response.icons || [];
  } catch (error) {
    console.error('Failed to load icons', error);
  } finally {
    loading.value = false;
  }
}

onMounted(fetchIcons);
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  max-width: 260px;
}

.icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f9fafc;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.icon-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
</style>
